import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";
import NewsList from "@/views/NewsList";
import GoodsList from "@/views/GoodsList";
import MyHeader from "@/views/MyHeader";
import MyMain from "@/views/MyMain";
import MyFooter from "@/views/MyFooter";
import My from "@/views/My";
import NotFound from "@/views/NotFound";
import TiYu from "@/views/TiYu";
import YuLe from "@/views/YuLe";
import CaiJing from "@/views/CaiJing";

Vue.use(VueRouter)

const routes = [
  {
    path: "/",// 指定路由地址
    component: Home// 当请求地址与路由地址匹配时，那么会使用组件Home
  },
  {
    // 支持的请求地址除/newsList以及，还支持/news
    path: "/newsList",
    alias: "/news",// 为地址起别名
    component: NewsList,
    // 解决默认不显示体育新闻问题：方案一：将二级路由地址与上一级地址设置为相同地址
    // children:[
    //     {
    //         path:"/newsList",
    //         name:"tiyu",
    //         component:TiYu
    //     },
    //     {
    //         path:"/newsList/yule",
    //         name:"yule",
    //         component:YuLe
    //     },
    //     {
    //         path:"/newsList/caijing",
    //         name:"caijing",
    //         component:CaiJing
    //     }
    // ]

    // 解决默认不显示体育新闻问题方案二：设置重定向
    // children:[
    //     {
    //         path:"/newsList",
    //         redirect:"/newsList/tiyu"
    //     },
    //
    //     {
    //         path:"/newsList/tiyu",
    //         name:"tiyu",
    //         component:TiYu
    //     },
    //     {
    //         path:"/newsList/yule",
    //         name:"yule",
    //         component:YuLe
    //     },
    //     {
    //         path:"/newsList/caijing",
    //         name:"caijing",
    //         component:CaiJing
    //     }
    // ]

    // 二级路由path可以省略一级路由地址部分
    children:[
      {
        path:"/",
        redirect:"tiyu"
      },

      {
        path:"tiyu",
        name:"tiyu",
        component:TiYu
      },
      {
        path:"yule",
        name:"yule",
        component:YuLe
      },
      {
        path:"caijing",
        name:"caijing",
        component:CaiJing
      }
    ]
  },
  {
    path: "/goodsList",
    // 可以设置为数组，起多个别名
    alias: ["/first", "/daoLang", "/wangFei"],
    component: GoodsList
  },
  {
    path: "/my",
    // 单页面多路由(了解）
    components: {
      one: MyHeader,
      main: MyMain,
      footer: MyFooter,
      default: My
    }
  },
  {
    path: "*",
    component: NotFound
  },
  {
    // redirect:重定向--》当请求地址为/home,被重定向至地址/
    path: "/home",
    redirect: "/"
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: "active"
})

export default router
